<!--
 * @Descripttion:
 * @version:
 * @Author: 韩应波
 * @Date: 2021-03-03 15:23:13
 * @LastEditors: 韩应波
 * @LastEditTime: 2021-03-09 14:06:59
-->
<template>
  <div class="apps">
    <div class="app" v-for="(item2, index2) in existApps" :key="index2">
      <div class="img">
        <img :src="item2.icon" ondragstart="return false" />
      </div>
      <span>{{ item2.name }}</span>
    </div>
    <div class="app" v-if="edit" @click="getApps()">
      <i
        :class="[
          existApps.length == 0 ? 'el-icon-plus' : 'el-icon-edit-outline',
          'icon'
        ]"
      ></i>
      <span>{{ existApps.length == 0 ? '添加' : '编辑' }}应用</span>
    </div>

    <!-- 添加应用 -->
    <el-dialog title="添加应用" :visible.sync="dialogVisible" width="1075px">
      <div v-loading="loading" class="application-box">
        <div class="el-transfer-panel wait-for">
          <p class="el-transfer-panel__header">
            未添加应用
            <span>（点击或拖动图标到右侧添加应用）</span>
          </p>
          <div class="el-transfer-panel__body">
            <draggable v-model="apps" group="site" animation="300">
              <div
                class="app"
                v-for="(item, index) in apps"
                :key="index"
                @click="addApp(index)"
              >
                <img :src="item.icon" ondragstart="return false" />
                <span>{{ item.name }}</span>
              </div>
            </draggable>
          </div>
        </div>
        <div class="el-transfer-panel already">
          <p class="el-transfer-panel__header">
            已添加应用
            <span>（点击应用图标移除，拖动排序）</span>
          </p>
          <div class="el-transfer-panel__body">
            <draggable v-model="appList" group="site" animation="300">
              <div
                class="app"
                v-for="(item, index) in appList"
                :key="index"
                @click="removeApp(index)"
              >
                <img :src="item.icon" ondragstart="return false" />
                <span>{{ item.name }}</span>
              </div>
              <div
                class="empty"
                v-if="appList.length == 0"
                onmousedown="return false"
              >
                点击左侧图标或拖动图标到此处添加
              </div>
            </draggable>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmApp()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import draggable from 'vuedraggable'
export default {
  name: 'application',
  components: { draggable },
  props: ['value', 'edit'],
  data () {
    return {
      dialogVisible: false,
      loading: false,
      apps: [], // 未添加应用
      appList: [], // 已选择的应用列表
      existApps: [] // 已确认的应用列表
    }
  },
  watch: {
    existApps: {
      handler (n) {
        this.$emit(
          'input',
          n.map(_ => ({ applicationId: _.id }))
        )
      },
      deep: true
    },
    value: {
      immediate: true,
      handler (n) {
        if (Array.isArray([n]) && n[0]?.applicationGroupId) {
          // 处理后端返回的数据
          let existApps = n.map(_ => {
            _.id = _.applicationId
            _.name = _.applicationName
            return _
          })
          this.existApps = this.$lo.cloneDeep(existApps)
        }
      }
    }
  },
  methods: {
    addApp (index) {
      this.appList.push(...this.apps.splice(index, 1))
    },
    removeApp (index) {
      this.apps.push(...this.appList.splice(index, 1))
    },
    confirmApp () {
      if (this.appList.length == 0) {
        this.$swal.error('至少添加一个应用')
      } else if (this.appList.length > 20) {
        this.$swal.error('同一分组下应用最多添加20个')
      } else {
        this.existApps = this.$lo.cloneDeep(this.appList)
        this.dialogVisible = false
      }
    },
    // 获取app列表
    getApps () {
      this.dialogVisible = true
      this.loading = true
      this.appList = this.$lo.cloneDeep(this.existApps) // 将已确认的列表添加到已选择的列表里面
      this.apps = []
      this.$POST('one-travel-api/application-management/queryForList')
        .then(res => {
          if (res.errorCode == '00000') {
            this.apps = res.data.filter(item => {
              // 移除已经选择了的应用
              for (let i = 0; i < this.appList.length; i++) {
                if (this.appList[i].id == item.id) {
                  return false // 已存在，移除
                }
              }
              return true
            })
          } else {
            this.$swal.error(res.message)
          }
        })
        .finally(_ => {
          this.loading = false
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.apps {
  padding: 12px 0 0;
  overflow: hidden;
  .app {
    position: relative;
    z-index: 9;
    display: inline-block;
    width: 60px;
    margin: 0 12px 12px 0;
    cursor: pointer;
    text-align: center;
    user-select: none;
    float: left;
    img,
    .icon,
    .img {
      display: inline-block;
      width: 60px;
      height: 60px;
      border-radius: 4px;
      overflow: hidden;
    }
    .icon {
      line-height: 60px;
      border: 1px dashed #ddd;
      font-size: 30px;
    }
    .img {
      position: relative;
    }
    & > span {
      font-size: 13px;
      text-overflow: ellipsis;
      white-space: normal;
      word-break: break-all;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
      line-height: normal;
    }
  }
}
:deep(.application-box) {
  text-align: center;
  .el-transfer-panel__body {
    height: auto;
    min-height: 500px;
    padding: 10px;
    overflow: hidden;
    & > div {
      height: 100%;
      min-height: 500px;
      position: relative;
    }
  }
  .el-transfer-panel {
    width: 600px;
    vertical-align: top;
    text-align: left;
  }
  .already {
    width: 385px;
    margin-left: 20px;
  }
  .el-transfer-panel__header span {
    font-size: 12px;
    color: #999;
  }
  .empty {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    line-height: 200px;
    background-color: #f6f6f6;
    text-align: center;
    border: 1px dashed #ddd;
  }
}
</style>
